<template>
  <div class="nav2">
    <img class="tu1" src="../assets/icon/扫码.svg" alt="" />
     <img class="tu2" src="../assets/icon/用户.svg" alt="" />
    <van-search 
    
     autocomplete="off"
      :class='["navsearch",show ? "avtionc": ""]'
      v-model="content"
      shape="round"
      background="node"
      placeholder="请输入搜索关键词"
      @focus="showPopup"
       @search="onSearch"
      @cancel="onCancel"
        show-action
        
    >

    </van-search >
   
  </div>
<van-popup class="masktop"
  v-model:show="show"
  close-icon="close"
  position="left"
  :style="{ height: '50%' ,width:'15rem',top:'0', left:'50%',   transform: 'translateX(-50%)', paddingTop:'2rem'}"
  get-container=".navsearch" 
  duration='0.2'
>
<div>
      <van-icon @click="clearhis" class="fl" name="delete-o" />
<van-divider content-position='left'>历史记录</van-divider>
      
   <div class="content">
          <span  v-for="(item ,index ) in history" :key="index" @click="tosearch(item)" class="content-item">{{item}}</span>
        </div>
        <div class="host">
          <div class="title">
     
    
    <van-divider content-position='left'
  :style="{ color: '#ff397c', borderColor: '#ff397c',  padding: '0 16px' }"
>
 <h3>热门搜索</h3>
</van-divider>
          </div>
          <div class="content">
            <span v-for="(item ,index) in hotkey" :key="index" @click="tosearch(item)"  >{{item}}</span>
          </div>
        </div>
</div>
</van-popup>
</template>

<script>
import { ref } from 'vue';
import { useRouter ,useRoute } from 'vue-router';
export default {
  setup() {
    const show = ref(false);
    const content = ref('');
    const history =ref([])
    const router = useRouter()
    const route = useRoute()
    const gethistorykeyworkd = ()=>{
      history.value = JSON.parse(localStorage.getItem('historykeyworkd') || "[]")
    }
    gethistorykeyworkd();
    const onSearch = (val) =>{
          console.log(history.value);
          if(history.value.indexOf(val) !==-1){
           var index = history.value.indexOf(val)
          history.value.splice(index,1)
          }
            history.value.unshift(val)
         var   text = JSON.stringify(history.value)
           localStorage.setItem('historykeyworkd',text)
           route.params.keyword ?    router.replace({path:"/goodslist/"+val}) :router.push({path:"/goodslist/"+val})
    
           show.value=false

    

    }
    const showPopup = () => {
      show.value = true;
    };
    const clearhis = () => {
      history.value=[]
       localStorage.setItem('historykeyworkd','')
    };
    const onCancel = () => show.value=false;
    return {
      clearhis, 
      show,
      showPopup,
      onCancel,
      gethistorykeyworkd,
      onSearch,
      content,
      history
    };
  },data(){
    return {
      hotkey:['iphone6','iphone12','笔记本电脑','潮男衬衫','键盘膜','鼠标']
    }
  },
  methods:{
    tosearch: function(val){
      this.content =val
      this.onSearch(val);
    }
  }

};
</script>

<style lang="scss" scoped>
.nav2 {
  // display: flex;
  width: 15rem;

  // overflow: hidden;
  // flex-wrap: wrap;
  // justify-content: space-around;
  // align-items: center;
  &::after{
    display: block;
    content: "";
    clear: both;
  }
  z-index: 3000;
  .tu1{
    float: left;

  }
  .tu2{
    float: right;
  }
  img {
    width: 1rem;
    vertical-align: middle;
    padding: 0.01rem;
  }
  .navsearch {
   width: 12.2rem;
    position: relative;
    z-index:3000;
    transition: all 0.3s 0.3s ;
    padding: 0rem;

    vertical-align: middle;
  }
 .avtionc{
     flex: 0 0 100%;
     transform: translateY(-100%) ;
    
  }
}
.masktop{
  width: 15rem;
}
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
     h3{
        margin: 0;
      }
    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 4px 12px;
      span {
        height: 24px;
        padding: 4px;
        margin-top: 4px;
        font-size: 14px;
        margin-right: 6px;
        line-height: 24px;
        border-radius: 6px;
        background-color: #f3f5f6;
      }
    }
  
</style>